<template>
    <div>
        <el-table
            ref="specificsTableRef"
            row-key="id"
            size="large"
            :data="formData.specific_list"
        >
            <el-table-column width="50">
                <template #default>
                    <div class="move-icon cursor-move">
                        <Icon name="el-icon-Rank" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="权益名称" min-width="200">
                <template #default="{ row }">
                    <div class="w-[90%]">
                        <el-input
                            v-model="row.name"
                            placeholder="请输入"
                            clearable
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="权益描述" min-width="200">
                <template #default="{ row }">
                    <div class="w-[90%]">
                        <el-input
                            v-model="row.description"
                            placeholder="请输入"
                            clearable
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="支持状态" min-width="100">
                <template #default="{ row }">
                    <el-switch
                        v-model="row.is_support"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </template>
            </el-table-column>
            <el-table-column label="是否显示" min-width="100">
                <template #default="{ row }">
                    <el-switch
                        v-model="row.is_disable"
                        :active-value="0"
                        :inactive-value="1"
                    />
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="60" fixed="right">
                <template #default="{  $index }">
                    <ElButton type="danger" link @click="handleDelete($index)">
                        删除
                    </ElButton>
                </template>
            </el-table-column>
        </el-table>

        <el-button
            type="primary"
            class="mt-4"
            @click="handleCreate"
        >添加权益</el-button>
    </div>
</template>

<script setup lang="ts">
import type { ElTable } from 'element-plus'
import { useVModel } from '@vueuse/core'
import Sortable from 'sortablejs'

const props = defineProps<{
    modelValue: Record<string, any>
}>()

const emits = defineEmits<{
    (event: 'update:modelValue', value: Record<string, any>): void
}>()

const specificsTableRef = ref<InstanceType<typeof ElTable>>()

const formData = useVModel(props, 'modelValue', emits)

/**
 * 权益添加
 *
 * @author zero
 */
const handleCreate = () => {
    formData.value.specific_list.push({
        name: '',
        description: '',
        sort: 0,
        is_support: 1,
        is_disable: 1
    })
}

/**
 * 权益删除
 *
 * @param index
 * @author zero
 */
const handleDelete = (index: number) => {
    formData.value.specific_list.splice(index, 1)
}

/**
 * 初始化拖拽排序
 *
 * @author zero
 */
const initSortable = () => {
    const el = specificsTableRef.value?.$el.querySelector('.el-table__body tbody')
    Sortable.create(el, {
        animation: 150,
        handle: '.move-icon',
        onEnd: ({ newIndex, oldIndex }: any) => {
            const arr = formData.value?.specific_list
            const currRow = arr.splice(oldIndex, 1)[0]
            arr.splice(newIndex, 0, currRow)
            formData.value.specific_list = arr
        }
    })
}

onMounted(async () => {
    await nextTick()
    initSortable()
})
</script>